<form id="second-form" role="form" data-toggle="validator" method="POST" action="">
    <button type="button" id="add-row" class="btn btn-success">增加抽取条件</button>
    <input value="{$ids}" name="ids" id="ids" style="display: none;" />
    <input value="1" name="is_bc" id="is_bc" style="display: none;" />

    <table id="dynamic-table" class="table table-bordered">
        <thead>
            <tr>
                <th>专家分类</th>
                <th>抽取地域范围</th>
                <!-- <th>专家职称</th> -->
                <th>专家库</th>
                <th>符合条件数量</th>
                <th></th>
                <th>抽取数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {foreach $cq_rst as $key=>$obj}
            <tr>
                <td style="width: 200px;">
                    <!-- <select id="chooseType" style="width: 150px;" data-live-search="true" class="form-control selectpicker major"
                        k_field="major" name="item[major][]">
                        <option value="">请选择</option>
                        {foreach name="expert_type" item="vo"}
                        <option value="{$vo.title}" {in name="vo.title" value="$obj.major" }selected{/in}>
                            {$vo.title}
                        </option>
                        {/foreach}
                    </select> -->
                    <input id="c-class_id" onchange="aaa(this)"  data-primary-key="name" placeholder="请选择专家分类"  k_field="major" data-source="expert/searchProfessional" class="form-control selectpage majormajor" name="item[major][]"   value="">
               
                </td>
                <td>
                    <div class="form-group">
                        <div class="form-inline" data-toggle="cxselect"
                            data-url="/assets/libs/fastadmin-cxselect/js/cityData.min.json"
                            data-selects="province,city,area" data-json-space="" data-json-name="n" data-json-value="">
                            <select class="province form-control pb_province" name="item[pb_province][]"
                                k_field="pb_province" style="width: 30%;" data-first-title="选择省">
                                <option value="">请选择</option>
                                <option value="{$obj.pb_province}" selected="{$obj.pb_province}">{$obj.pb_province}
                                </option>
                            </select>
                            <select class="city form-control pb_city" name="item[pb_city][]" style="width: 30%;"
                                k_field="pb_city" data-first-title="选择市">
                                <option value="">请选择</option>
                                <option value="{$obj.pb_city}" selected="{$obj.pb_city}">{$obj.pb_city}</option>
                            </select>
                            <select class="area form-control pb_area" name="item[pb_area][]" style="width: 30%;"
                                k_field="pb_area" data-first-title="选择地区">
                                <option value="">请选择</option>
                                <option value="{$obj.pb_area}" selected="{$obj.pb_area}">{$obj.pb_area}</option>
                            </select>
                        </div>
                    </div>
                </td>
                
                <td>
                    <select id="chooseKu" style="width: 150px;" class="form-control selectpicker expert_ku"
                        k_field="expert_ku" name="item[expert_ku][]">
                        <option value="">请选择</option>
                        {foreach name="expert_ku" item="vo"}
                        <option value="{$vo.title}" {in name="vo.title" value="$obj.expert_ku" }selected{/in}>
                            {$vo.title}</option>
                        {/foreach}
                    </select>
                </td>
                <td><input type="text" name="item[fuhe_num][]" class="form-control fuhe_num" value="0" disabled></td> 
                <td><input type="text" name="item[expertids][]" class="form-control expertids" value=""  style="display: none;"></td> 
                <td><input type="number" name="item[cq_num][]" class="form-control cq_num" oninput="if(value>0)value=0;if(value<0)value=0" max="0"></td>
                <td><button type="button" class="btn btn-danger btn-xs remove-row"><i class="fa fa-times"></i></button>
                </td>
            </tr>
            {/foreach}
        </tbody>
    </table>

    <div class="form-group row">
        <label class="control-label col-xs-12"></label>
        <div class="col-xs-12">
            <button type="button" onclick="submitCq()" class="btn btn-success btn-embossed">抽取</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<template id="row-template">
    <tr>
        <td style="width: 200px;">
            <!-- <select id="chooseType" style="width: 150px;"  data-live-search="true" class="form-control selectpicker major" k_field="major"
                name="item[major][]">
                <option value="">请选择</option>
                {foreach name="expert_type" item="vo"}
                <option value="{$vo.title}" {in name="vo.title" value="" }selected{/in}>
                    {$vo.title}
                </option>
                {/foreach}
            </select> -->
            <input id="c-class_id" onchange="aaa(this)" placeholder="请选择专家分类"  k_field="major" data-source="expert/searchProfessional" class="form-control selectpage" name="item[major][]"   value="">
        </td>
        <td>
            <div class="form-group">
                <div class="form-inline" data-toggle="cxselect"
                    data-url="/assets/libs/fastadmin-cxselect/js/cityData.min.json" data-selects="province,city,area"
                    data-json-space="" data-json-name="n" data-json-value="">
                    <select class="province form-control pb_province" name="item[pb_province][]" k_field="pb_province"
                        style="width: 30%;" data-first-title="选择省">
                        <option value="">请选择</option>
                        <option value="陕西省" selected="">陕西省</option>
                    </select>
                    <select class="city form-control pb_city" name="item[pb_city][]" style="width: 30%;"
                        k_field="pb_city" data-first-title="选择市">
                        <option value="">请选择</option>
                    </select>
                    <select class="area form-control pb_area" name="item[pb_area][]" style="width: 30%;"
                        k_field="pb_area" data-first-title="选择地区">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
        </td>
       
        <td>
            <select id="chooseKu" style="width: 150px;" class="form-control selectpicker expert_ku" k_field="expert_ku"
                name="item[expert_ku][]">
                <option value="">请选择</option>
                {foreach name="expert_ku" item="vo"}
                <option value="{$vo.title}" {in name="vo.title" value="" }selected{/in}>{$vo.title}</option>
                {/foreach}
            </select>
        </td>
        <td><input type="text" name="item[fuhe_num][]" class="form-control fuhe_num" value="0" disabled></td> 
        <td><input type="text" name="item[expertids][]" class="form-control expertids" value=""  style="display: none;"></td> 
        <td><input type="number" name="item[cq_num][]" class="form-control cq_num" oninput="if(value>0)value=0;if(value<0)value=0" max="0"></td>
        <td><button type="button" class="btn btn-danger btn-xs remove-row"><i class="fa fa-times"></i></button>
        </td>
    </tr>
</template>



<form id="cq_result_form" style="display: none;" class="form-horizontal" role="form" data-toggle="validator"
    method="POST" action="project/confirmCq">
    <input value="{$ids}" name="row[ids]" style="display: none;" />
    <input value="1" name="row[is_bc]" id="is_bc" style="display: none;" /> 
    <input value="" name="row[result_ids]"  style="display: none;" id="result_ids"/>
    <div class="cjjj">

        <div id="controls">
            <button id="startBtn"></button>
        </div>
        <div id="plate-container"></div>

    </div>

    <div class="form-group row">
        <label class="control-label col-xs-12"></label>
        <div class="col-xs-12">
            <button class="btn btn-success btn-embossed">确定抽取</button>
        </div>
    </div>

</form>


<style>
    .cjjj {
        #plate-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 15px;
            margin: 30px 0;
            position: relative;
        }

        .plate-card {
            padding: 0;
            padding: 8px 0;
            text-align: center;
            background: #f8f9fa;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
            display: flex;
            flex-direction: column;
        }

        .plate-id {
            font-size: 12px;
            color: #6c757d;
            margin-bottom: 5px;
        }

        .plate-number {
            font-size: 16px;
            font-weight: bold;
            color: #212529;
        }

        .shuffling {
            animation: shake 0.8s ease-in-out infinite;
        }

        .highlight {
            background: #fff3cd !important;
            border-color: #ffd351 !important;
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
        }

        @keyframes shake {
            0% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(5px);
            }

            50% {
                transform: translateX(-5px);
            }

            75% {
                transform: translateX(3px);
            }

            100% {
                transform: translateX(0);
            }
        }

        #controls {
            text-align: center;
            margin: 20px 0;
        }

        button {
            /* padding: 12px 36px;
            font-size: 16px;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
            margin: 0 10px; */
            display: none;
        }

        button:hover {
            background: #218838;
            transform: translateY(-2px);
        }

        #result {
            margin-top: 30px;
            padding: 20px;
            background: #e9ecef;
            border-radius: 8px;
        }
    }
</style>



<style>
    .cq_result_row_item {
        margin: 20px 0;
    }

    .cq_result_row_item_box {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .cq_result_row_item_box_item {
        margin-right: 20px;
    }

    .custom-checkbox .form-check-input {
        width: 15px;
        /* 设置复选框的大小 */
        height: 15px;
    }

    .custom-checkbox .form-check-input:checked {
        background-color: #007bff;
        /* 设置选中时的颜色 */
    }

    .custom-checkbox {
        margin-right: 20px;
        margin-top: 10px;
    }

    .cq_itemitem {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cq_result_row_item_title {
        font-size: 14px;
        font-weight: bold;
    }
</style>